<!-- 模块说明 -->
<template>
  <div class="container">
    <div class="origin_form">
      <form :action="url" method="post" enctype="multipart/form-data" target="stop_jump">
        <input type="file" name="ulfile"><br>
        <input type="text" name="to_path" id="to_path" placeholder="上传路径" @change="testPath($event)"><br>
        <input type="hidden" name="user" :value="user">
        <input type="submit" value="提交文件" v-show="isLeagal">
      </form>
      <iframe name="stop_jump" id="empty"></iframe>
    </div>
    <!-- <div class="vue_form">
      <input type="file" name="vfile" id="vfile" @change="uploadFile($event)">
      <input type="text" name="path" id="path" v-model="path">
    </div> -->
    <!-- <button @click="edit">测试按钮</button> -->
  </div>
</template>

<script>
// import uploadFile1 from '@/api/sendFile.js'
/* eslint-disable */
const reg2 = new RegExp('200', 'g')
import Vue from 'vue'
window.addEventListener('message', function (e) {
  console.log(e.data)
  if (e.data.status !== 200) {
      // 由于设置了原生监听器，故此时this对象为事件发生者window，若要调用notifacation组件，则需要从vue中调用，而非this中
      Vue.prototype.$notify({
        title: '上传错误',
        type: 'warning',
        message: e.data.msg
      })
      Vue.prototype.$notify.close()
    } else {
      Vue.prototype.$notify({
        title: '上传成功',
        type: 'success'
      })
      Vue.prototype.$notify.close()
    }
})
export default {
  // 组件注册
  components: {},
  mixins: [],
  props: [],
  data () {
    return {
      url: 'http://127.0.0.1:8000/fileRecieve/',
      path: '',
      // user: 'tester1',
      user: this.$store.state.user,
      iframeFeedBack: {},
      // 检测虚拟路径的正则
      reg1: /[/]$/,
      isLeagal: false,
    }
  },
  computed: {},
  watch: {},
  methods: {
    // async edit () {
    //   const result = await edit()
    //   console.log(result)
    // },
    testPath (e) {
      console.log(e.target.value)
      console.log(this.reg1.test(e.target.value))
      // 校验用户提交的路径是否合规
      if (!this.reg1.test(e.target.value)) {
        // 不合规弹出警告
        console.log(this)
        this.$notify({
          title: '上传路径错误',
          message: '路径需以/结尾',
          type: 'warning'
        })
      } else {
        this.isLeagal = true
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  destroyed () {}
}
</script>
<style lang="less" scoped>
.container {
  min-height: 500px;
}
.el-upload .el-upload--text {
  margin: 10px;
}
#uploadFile {
  display: none;
}
.origin_form {
  background-color: aqua;
  margin: 10px;
}
#empty {
  display: none;
}
</style>
